<template>
  <div id="app-container">
    <!--条件查询表单-->
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-input v-model="goods.name" placeholder="商品名称"/>
      </el-form-item>

      <el-form-item label="商品分类">
        <el-select v-model="goods.sortId" placeholder="请选择" @change="getList(-1)">
          <el-option
            v-for="sort in sorts"
            :key="sort.id"
            :label="sort.title"
            :value="sort.id">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="商品类型">
        <el-select v-model="goods.isType" placeholder="请选择" @change="getList(-1)">
          <el-option :value="type.one" :label="type.one"/>
          <el-option :value="type.two" :label="type.two"/>
        </el-select>
      </el-form-item>

      <el-button type="primary" icon="el-icon-search" @click="getList(-1)">查询</el-button>
      <el-button type="default" @click="resetData()">清空</el-button>
      <router-link to="/goods/add">
        <el-button type="primary">添加商品</el-button>
      </router-link>
    </el-form>

    <!--数据显示列表-->
    <el-table ref="multipleTable" :data="dataList" border tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55">
      </el-table-column>
      <el-table-column type="index" label="序号" width="90">
        <template slot-scope="scope">
          {{pageSize*(currentPage-1)+scope.$index+1}}
        </template>
      </el-table-column>
      <el-table-column prop="name" label="商品名称" width="100" ></el-table-column>
      <el-table-column prop="price" label="商品价格 " width="100" ></el-table-column>
      <el-table-column prop="status" label="商品状态 " width="100" >
        <template slot-scope="scope">
          <span v-if="scope.row.status==0">上线</span>
          <span v-else>下线</span>
        </template>
      </el-table-column>
      <el-table-column prop="label" label="标签 " width="200"></el-table-column>
      <el-table-column prop="buyNum" label="销量" width="100" ></el-table-column>
      <el-table-column prop="image" label="品牌主图片">
        <template slot-scope="scope">
          <div class="pic">
            <img :src="'http://rj0387v46.hn-bkt.clouddn.com/'+scope.row.image" width="150px">
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <router-link :to="'/goods/edit/'+scope.row.id">
            <el-button type="success" size="mini" icon="el-icon-edit">修改</el-button>
          </router-link>
          <el-button type="danger" size="mini" icon="el-icon-delete" @click="handleDelete(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin-top: 20px">
      <el-button @click="toggleSelection([dataList[1], dataList[2]])">切换第二、第三行的选中状态</el-button>
      <el-button @click="toggleSelection()">取消选择</el-button>
      <el-button @click="deleteAll()">删除所选</el-button>
    </div>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[1, 2, 3, 5]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
</template>
<script>
  import goods from "../../api/goods";
  import sort from "../../api/sort";
  export default {
    data(){
      return {
        dataList:[],
        multipleSelection: [],
        total:100,
        currentPage: 1,
        pageSize: 3,
        goods:{},
        type:{},
        sorts:[]
      }
    },
    created() {
      this.getList();
    },
    methods:{
      getList(row){
        if (row==-1){
          this.currentPage=1;
        }
        goods.getList(this.currentPage,this.pageSize,this.goods).then(res=>{
          if (res.data.data.length==0 && this.currentPage==0){
            this.currentPage=this.currentPage-1;
            console.log(this.currentPage)
            this.getList()
          }else {
            this.dataList = res.data.data
            this.total = res.data.total
          }
        })
        goods.getType().then(res=>{
          this.type = res.data
        })
        sort.getSortAll().then(res=>{
          this.sorts = res.data
        })
      },
      resetData(){
        this.goods={};
      },
      handleDelete(id){
        this.$confirm("是否确定删除数据？", "提示", {type: 'warning'})
          .then(() => {
            goods.delete(id).then(res=>{
              this.$message.success(res.message);
              this.getList();
            })
          })
          .catch(() => {
            // 表示点击了取消
            this.$message.info("取消删除操作");
          });
      },
      handleSizeChange(pageSize){
        this.pageSize=pageSize
        this.getList();
      },
      handleCurrentChange(currentPage){
        this.currentPage=currentPage;
        this.getList();
      },

      deleteAll(row){
        this.$confirm("是否确定删除数据？,删除之后分类下所有商品将被删除", "提示", {type: 'warning'})
          .then(() => {
            this.multipleSelection.forEach(row=>{
              goods.delete(row.id).then(res=>{
                this.$message.success(res.message)
                this.getList()
              })
            })
          })
          .catch(() => {
            // 表示点击了取消
            this.$message.info("取消删除操作");
          });
      },
      toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      }
    }
  }
</script>
